import React, { useRef, useState } from 'react';
import { useAccess, useModel } from 'umi';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import AddReport from './components/AddReport';
import DetailsReport from './components/DetailsReport';
import request from 'umi-request';

const Report = (): React.ReactNode => {
    const access = useAccess();
    const actionRef = useRef<ActionType>();
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    type GithubIssueItem = {
        url: string;
        id: number;
        number: number;
        title: string;
        labels: {
            name: string;
            color: string;
        }[];
        state: string;
        comments: number;
        created_at: string;
        updated_at: string;
        closed_at?: string;
    };


    const columns: ProColumns<GithubIssueItem>[] = [
        {
            title: '报送内容',
            dataIndex: 'title',
            copyable: true,
            ellipsis: true,
            tooltip: '标题过长会自动收缩',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: '此项为必填项',
                    },
                ],
            },
            render(dom, entity) {
                return <>
                    <DetailsReport record={entity} onClose={actionRef.current?.reload} />
                </>
            },
        },
        {
            title: '报送时间',
            key: 'showTime',
            width: 120,
            dataIndex: 'created_at',
            valueType: 'date',
            sorter: true,
            hideInSearch: true,
        },
        // {
        //     title: '报送时间',
        //     dataIndex: 'created_at',
        //     valueType: 'dateRange',
        //     hideInTable: true,
        //     search: {
        //         transform: (value) => {
        //             return {
        //                 startTime: value[0],
        //                 endTime: value[1],
        //             };
        //         },
        //     },
        // },
        {
            title: '报送人',
            dataIndex: 'user',
            width: 200,
            valueType: 'select',
            valueEnum: {
                all: { text: '全部' },
                付小小: { text: '付小小' },
                曲丽丽: { text: '曲丽丽' },
                林东东: { text: '林东东' },
                陈帅帅: { text: '陈帅帅' },
                兼某某: { text: '兼某某' },
            },
        },
        // {
        //     title: '操作',
        //     key: 'option',
        //     width: 120,
        //     valueType: 'option',
        //     render: () => [
        //         <a key="link">链路</a>,
        //         <a key="warn">报警</a>,

        //     ],
        // },
    ];

    return <>

        {/* <ProTable<GithubIssueItem>
            actionRef={actionRef}
            columns={columns}
            request={async (params, sort, filter) => {
                console.log(sort, filter);
                return request<{
                    data: GithubIssueItem[];
                }>('https://proapi.azurewebsites.net/github/issues', {
                    params,
                });
            }}
            toolbar={{
                search: {
                    onSearch: (value: string) => {
                        alert(value);
                    },
                },
                // filter: (
                //   <LightFilter>
                //     <ProFormDatePicker name="startdate" label="响应日期" />
                //   </LightFilter>
                // ),
                actions: [
                    <AddReport onClose={actionRef.current?.reload} />,
                ],
            }}
            rowKey="key"
            search={false}
        /> */}

    </>;
};
export default Report;
